<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>设备环境检测</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        body{
            /*
            background-image: url(https://img0.baidu.com/it/u=748161874,3133896503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=888);
            
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position: center;
            -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
            */
        }
        ul li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        ::-webkit-scrollbar{
            /* width: 0; 移动端取消滚动条无效*/
            display: none;
        }
        .container1{
            /*
            border: .0966rem solid red;*/
            
          height: 100%; 
             /* height: fit-content;*/
             padding-top: .4831rem;
             padding-bottom: 2.4155rem;
            display: flex;
            flex-direction: column;
            justify-content: center;/*水平居中*/
            align-items: center;/*垂直居中*/
            overflow-y: scroll;
            box-sizing: border-box;

        }
        .Btn1{
            display: inline-block;
            border: none;
            border-radius: .0483rem;
            width: 2.8986rem;
            height: .9662rem;
            background: #09bb07;
            color: #fff;
            letter-spacing: .0242rem;

            margin-top: .4831rem;
        }
        @media (any-hover: hover){
            .Btn1:hover{

            }
        }




        /*  外部容器样式*/
        .container{
            display: none;
            width: 7.2464rem;
            height: .4831rem;
            border-radius: .3623rem;
            position: absolute;
            top: 65%;
            overflow: hidden;
            background-color: #f0f0f0;
        }
        .container span{
            width: 2.4155rem;
            font-size: .2899rem;
            position: absolute;
            z-index:20;
            line-height: .4831rem;
            letter-spacing: .0193rem;
            right: calc(50% - 1.2077rem);
            text-align: center;
            transform: scale(0.87);
            /*
            mix-blend-mode: difference;*/
            color: #000;
        }
         /* 内部加载部分样式 */
        #content{     
            height: 100%;
            width: 0;
            border-radius: .3623rem;
            /**/
            background-color: #09bb07;
            text-align: center;
            line-height: .7246rem;
            right: calc();
        }




        /*信息*/
        .box1{
            /*
            border: 1px solid red;*/
            width: 90%;
            background: #0097ff;
            display: none;
        }
        .ul1{
            border: 1px solid green;

        }
        .ul1 li{/**/
            min-height: fit-content;
            font-size: .3865rem;
            line-height: 1.087rem;

            display: flex;
            justify-content: space-between;
            color: #fff;
            margin: .0725rem auto;

        }
        .ul1 li span{
            display: inline-block;
            /*border: 1px solid red;
            */
            height: 1.087rem;
            
            color: #fff;
        }
        
        .ul1 li span:nth-child(1){
            width: 30%;
            text-align: end;
            padding-right: .1208rem;
            box-sizing: border-box;
           
           
            



            height: 100%;
            box-sizing: border-box;
            word-wrap: break-word;
        }
        


        .ul1 li span:nth-child(2){
            width: calc(100% - 30%);
            text-align: start;
            padding-left: .4831rem;
            height: 100%;
            box-sizing: border-box;
            word-wrap: break-word;

        }
    </style>
</head>
<body>
    <div class="container1">
        <!-- <button id="Btn1" class="Btn1 start">开始检测</button> -->

        <!-- 进度条 -->
        <div class="container">
            <span style=""></span>
            <div id="content"></div>
        </div>

        <!-- 信息 -->
        <div class="box1">
            <ul class="ul1">

                <li>
                    <span>设备</span>
                    <span class="1">iPhone</span>
                </li>
                <li style="color:#efefef; margin-left:calc(50% - .4831rem);">
                    浏览器
                </li>
                <li>
                    <span>开发代号</span>
                    <span class="2">iPhone</span>
                </li>
                <li>
                    <span>名称</span>
                    <span class="3">iPhone</span>
                </li>
                <li>
                    <span class="row2">平台和版本</span>
                    <span class="4">iPhone</span>
                </li>
                <li>
                    <span>启用cookie</span>
                    <span class="5">iPhone</span>
                </li>
                <li>
                    <span>是否联网</span>
                    <span class="6">iPhone</span>
                </li>
                <li>
                    <span>操作系统</span>
                    <span class="7">iPhone</span>
                </li>
                <li>
                    <span>厂商和版本</span>
                    <span class="8">iPhone</span>
                </li>
                

            </ul>
        </div>
        <script>
            //?os=xxx
            let params1 = location.search.substr(1)//去除链接含参部分的问号
            let arrr1 = params1.split('=')
            //判断第一个参数 id值
            os = arrr1[1]
            console.log("os: "+os)
            









            os = arrr1[1]
            appCodeName = window.navigator.appCodeName
            appName = window.navigator.appName
            appVersion = window.navigator.appVersion
            cookieEnabled = window.navigator.cookieEnabled
            switch (cookieEnabled){
                case true:
                cookieEnabled = '是';
                    break;
                case false:
                cookieEnabled = '否';
                    break;
            }
            onLine = window.navigator.onLine
            switch (onLine){
                case true:
                    onLine = '是';
                    break;
                case false:
                    onLine = '否';
                    break;
            }
            platform = window.navigator.platform
            userAgent = window.navigator.userAgent
            document.getElementsByClassName("1")[0].innerHTML= os
            document.getElementsByClassName("2")[0].innerHTML= appCodeName
            document.getElementsByClassName("3")[0].innerHTML= appName
            document.getElementsByClassName("4")[0].innerHTML= appVersion
            document.getElementsByClassName("5")[0].innerHTML= cookieEnabled
            document.getElementsByClassName("6")[0].innerHTML= onLine
            document.getElementsByClassName("7")[0].innerHTML= platform
            document.getElementsByClassName("8")[0].innerHTML= userAgent
        </script>



        <button id="Btn1" class="Btn1 start">开始检测</button>
    </div>



    

    <script>
        var Btn1 = document.querySelector("#Btn1")
        Btn1.onclick = function(){
            
            if (Btn1.className == "Btn1 start"){
                document.querySelector(".container").style.display='block'
                Btn1.innerText='取消'
                Btn1.style.backgroundColor='#9f9f9f'
                Btn1.className = "Btn1 stop"
                fBtn1()
            } else{
                //alert("加载中，请勿重复点击！")
                document.querySelector(".container").style.display='none'
                Btn1.innerText='开始检测'
                Btn1.style.backgroundColor='#09bb07'
                _content.style.width='0'
                Btn1.className = "Btn1 start"
                clearInterval(id);
            }
            
        }
        function fBtn1(){
            //加载进度条
            //获取content节点
             _content=document.getElementById("content");
            //var _container=document.getElementsByClassName("container")[0];
            var span = document.querySelector(".container span")
            var num=0; //进度条里边的长度
            
            //设置计时器（动起来的关键）
             id = setInterval(function(){
            //num++;
            var p = Math.random()
            if ( p <0.4){
                    var beishu = Math.random()
            }else if (p >= 0.5 && p < 0.75){
                    var beishu = Math.random()*30
            } else{
                var beishu = Math.random()*30
            }
            
            num += Math.random()*beishu;
            //设置content的宽度（动态变化）
            _content.style.width=num+'px';
            var num1=parseInt(num/3);
            //content内文字显示为百分比与宽度对应
            //_content.innerText=num1+'%';
            span.innerText=num1+'%';
            //当content的宽度与container宽度相同时清除计时器
            /*
            if(num==300){
                //clearInterval(id);
            }*/
            //加载到100%时替换content中的文字
            //if(span.innerText=="100%"){
            if(num1 >="50"){
                //_container.innerText="加载完成"
                span.style.color="#fff"
            }
            if(num1 >="100"){
                //_container.innerText="加载完成"
                span.innerText="加载完成"
                //Btn1.innerText='重新检测'
                //Btn1.style.backgroundColor='#09bb07'
                Btn1.className = "Btn1 start"
                //fBtn1_end()
                clearInterval(id);
                console.log("执行fBtn1_end")
                setTimeout(function(){
                    console.log("执行完毕")
                    document.querySelector(".container").style.display='none'
                    document.querySelector(".box1").style.display='block'
                    document.querySelector(".Btn1").style.display='none'
                    document.querySelector(".container1").style.height='fit-content'
                    // height: fit-content;
                },500)
                clearTimeout();
                
            }
            //每隔10毫秒变换一次
            },100)
            

        }




        function fBtn1_end() {
            console.log("执行fBtn1_end")
            setTimeout(function(){
                console.log("执行完毕")
                document.querySelector(".container").style.display='none'
            },500)
            clearTimeout();
        }
    	
    </script>
    <script>
        function os1(){
            var os = function (){
                        var ua = navigator.userAgent,
                        isWindowsPhone = /(?:Windows Phone)/.test(ua),
                        isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
                        isAndroid = /(?:Android)/.test(ua),
                        isFireFox = /(?:Firefox)/.test(ua),
                        isChrome = /(?:Chrome|CriOS)/.test(ua),
                        isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
                        isPhone = /(?:iPhone)/.test(ua) && !isTablet,
                        isPc = !isPhone && !isAndroid && !isSymbian;
                        return {
                            isTablet: isTablet,
                            isPhone: isPhone,
                            isAndroid: isAndroid,
                            isPc: isPc
                        };	
                    }();
                    
                    if (os.isAndroid || os.isPhone) {   
                    alert("手机" );
                    } else if (os.isTablet) {
                        alert("平板" );
                    } else if (os.isPc) {
                        alert("电脑" );
                    }
        }
        
    </script>






    <script>
        //根据设备宽度计算html的font-size
        function resetHtmlFont(){
            //获取html对象并动态设置font-size = 设备宽度的1/10
            document.documentElement.style.fontSize = screen.width/10 + 'px';
        }
        //执行一下
        resetHtmlFont();
        //如果窗口大小改变了，则重新计算基础font-size
        window.onresize = resetHtmlFont;
    </script>


    <script type="text/javascript">
        var el = document.body;  
        if (el.addEventListener) {  
           window.addEventListener("online", function () {  
             alert("网络连接恢复");}, true);  
           window.addEventListener("offline", function () {  
             alert("网络连接中断");}, true);  
        }  
        else if (el.attachEvent) {  
           window.attachEvent("ononline", function () {  
             alert("网络连接恢复");});  
           window.attachEvent("onoffline", function () {  
             alert("网络连接中断");});  
        }  
        else {  
           window.ononline = function () {  
             alert("网络连接恢复");};  
           window.onoffline = function () {  
             alert("网络连接中断");};  
        }  
    </script>
</body>
</html>